<template>
    <div class="mineBox">
        <h2 class="header">{{title}}</h2>
        <div class="myBoxTop">
            <div class="leftBox">
                <h3>赵文政</h3>
                <span>又是美好的一天!</span>
            </div>
            <div class="rightBox">
                <!-- <van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" /> -->
                <!-- 上传头像 -->
                <van-uploader v-model="fileList" multiple :max-count="1"/>
            </div>
        </div>
        <div class="myconentBox">
            <div class="conent-shop">
                <p><van-icon name="coupon" /><span>待付款</span>
                </p>
                <p><van-icon name="send-gift" /><span>待配送</span></p>
                <p><van-icon name="point-gift" /><span>已发货</span></p>
                <p><van-icon name="balance-list" /><span>退款/售后</span></p>
            </div>
        </div>
    </div>
</template>




<script>
import Vue from "vue";
import { Uploader,Icon } from "vant";
Vue.use(Uploader);
Vue.use(Icon);
export default {
  data() {
    return {
      title:"",
      fileList: [
        // { url: "https://img.yzcdn.cn/vant/leaf.jpg" },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // { url: "https://cloud-image", isImage: true },
      ],
    };
  },
  mounted() {
    document.title = this.$route.meta.title;
    this.title=document.title
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
  },
};
</script>

<style lang="scss">
.mineBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .myBoxTop {
    width: 100%;
    height: 120px;
    border-bottom: 1px solid orange;
    display: flex;
    background: red;
    line-height: 50px;
    padding: 10px 0;
    .leftBox {
      padding-left: 20px;
      width: 150px;
      height: 100%;
      color: #fff;
      font-size: 22px;
      span {
        font-size: 15px;
      }
    }
    .rightBox {
      flex: 1;
      text-align: end;
      margin-right: 30px;
      line-height: 120px;
    }
  }
  .myconentBox {
    width: 100%;
    flex: 1;
    .conent-shop{
        width: 100%;
        height: 70px;;
        display: flex;
        justify-content: space-around;
        line-height: 30px;
        font-size: 15px;
        p{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top:10px;
            i{
                color: orangered;
            }
        }
    }
  }
}
</style>